<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
import { uploadImgApi } from '@/apis/consult';
import { useConsultStore } from '@/store/consult';
import type { Picture } from '@/types/consult';
import { onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';


const props = defineProps<{
  type: string
  illnessType:string
  depId:string
}>()

 // 病情描述数据
 const formData  = ref({
    illnessDesc: '', // 病情描述
    illnessTime: 1, // 患病时间
    consultFlag: 0, // 是否就诊
    pictures: [] as Picture[] // // 图片数组
  })

// 患病时长
const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]
  
    // 选择患病时长
  const onTimeTagClick=(value: number)=> {
    // 记录用户选择的数据
    formData .value.illnessTime = value
  }

  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]
  
	// 省略前面小节的代码...
  
  function onFlagTagClick(value: number) {
    // 记录用户选择的数据
    formData.value.consultFlag = value
  }

  // 4. 选择图片
const onSelectImg = async(e: any)=>{
  const res = await uploadImgApi(e.tempFiles[0])
  formData.value.pictures.push(res)
}

// 5. 删除图片
const onDeleteImg= (e:any)=>{
  formData.value.pictures.splice(e.index, 1)
}

// 6. 下一步
const store = useConsultStore()

// 6.1 数据校验
const nextStepEnable = computed(() => {
    // 验证必要数据是否填写（接口中只要求病情描述必填）
    return formData.value.illnessDesc !== ''
  })

  const onNextStep = ()=>{
  // 6.2 数据缓存
  store.type = props.type
  store.illnessType = props.illnessType
  store.depId = props.depId
  store.illnessInfo = formData.value

  // 6.3 跳转到下一页
  uni.navigateTo({ url: '/subpkg_archive/list/index?type=consult' })
}

onShow(()=>{
  if(store.illnessInfo.illnessDesc !== ''){
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息？',
    confirmText: '确认',
    confirmColor: '#16C2A3',
    cancelColor: '#848484',
    success({ confirm }) {
      if (confirm) formData.value = store.illnessInfo
    },
  })
}
})
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            v-model="formData.illnessDesc"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text class="tag" :class="{ active: item.value === formData.illnessTime }" @click="onTimeTagClick(item.value)" v-for="(item, index) in illnessTimes">{{ item.text }}</text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text class="tag" :class="{ active: item.value === formData.consultFlag }"  @click="onFlagTagClick(item.value)" v-for="(item, index) in consultFlags" :key="item.value">{{ item.text }}</text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <!-- @vue-ignore -->
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :value="formData.pictures"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          :auto-upload="false"
          @delete="onDeleteImg"
          @select="onSelectImg"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextStepEnable" @click="onNextStep">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>